<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红包雨</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    body {
        background-color: #fb9d3b;
        overflow: hidden;
    }
    #wrapper img {
        position: absolute;
        transform: translateY(-100%);       
        animation: dropDowm 3s forwards;     
    }
    @keyframes dropDowm{
        0% {
            top: 0px;
            transform: translateY(-100%) rotate(0deg);   
        }
        100% {
            top: 110%;
            transform: translateY(0%) rotate(360deg);
        }
    }

    #modol {
        display: none;
    }

    #modol::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0, 0.5);
    }

    #hb {
        width: 350px;
        height: 450px;
        border-radius: 20px;
        background-color: #e7223e;
        color: #fad755;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -225px;
        margin-left: -175px;
        font-size: 30px;
        font-weight: 900;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    </style>
  
    <script type = "text/javascript">
            function init() {
            var dom = createDom(40);
            var wrapper = document.getElementById('wrapper');
            wrapper.appendChild(dom);
            bindEvent();
        }
        window.onload = function(){
                    var time = 3;
                    var secondEle = document.getElementById("second");
                    var timer = setInterval(function(){
                        secondEle.innerHTML = time;
                        time--;
                        if(time==0){
                            clearInterval(timer);
                            location.href="shoppingindex.html";
                        }
                            
                    },1000);
                }
     </script> 
</head>
<body>
    <div class="wrapper shake" id="wrapper">
            <div id="header-box"></div>
            <div id="box" class="box">
                <div id="content-box">
                    <center>
                    <img id="img" src="./img/红包.jpg" width="80" height="100">
                   </center>
                </div>
                <div id="confim"></div>
                <div id="refuse"></div>
            </div>
    </div>
    <span style="color:#fb9d3b" id="second"></span><a href="shoppingindex.html"></a>
</body>
</html>